<template>
  <div class="data-container">
    <div class="data-menu">
      <el-menu
        :default-active="defaultActive"
        class="el-menu-vertical-demo"
        background-color="#2D5F8B"
        text-color="#fff"
        active-text-color="#fff"
        :router="true"
      >
        <el-submenu :index="items.path" v-for="(items, indexs) in menuData" :key="indexs">
          <template slot="title">
            <span>{{ items.title }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item :index="items.path + '/' + item.path" v-for="(item, index) in items.children" :key="index">{{ item.title }}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
    <div class="data-main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultActive: ""
    };
  },
  computed: {
    menuData() {
      const systemData = JSON.parse(
        JSON.stringify(this.$router.options.routes[0].children[1])
      );
      return systemData.children.map(item => {
        item.path = `${systemData.path}/${item.path}`;
        return item;
      });
    }
  },
  watch: {
    $route(newVal) {
      this.defaultActive = newVal.path;
    }
  },
  mounted() {
    this.defaultActive = this.$route.path;
  }
};
</script>

<style lang="less">
.data-container {
  display: flex;
  .data-menu {
    width: 200px;
    height: calc(100vh - 60px);
    background-color: #2d5f8b;
    // text-align: center;
    .el-menu {
      border-right: none !important;
    }
    .el-menu-item.is-active {
      background: #d64635 !important;
      border-bottom-color: #d64635 !important;
    }
  }
  .data-main {
    display: 1;
  }
}
</style>